<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>员工列表页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/styleemp.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/time.js"></script>
    <style type="text/css">
        #exit {
            padding: 26px 15px 0 0;
            margin: 0;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p id="time"></p>
                <a id="exit" href="javascript:;" @click="exit">安全退出</a>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="login.html">员工信息</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                您好,{{user.realname}}!
            </h1>
            <table class="table">
                <tr class="table_header">
                    <td>
                        ID
                    </td>
                    <td>
                        姓名
                    </td>
                    <td>
                        头像
                    </td>
                    <td>
                        工资
                    </td>
                    <td>
                        年龄
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
                <tr v-for="(employee,index) in employees" :class="index%2==0?'row1':'row2'" id="tr1">
                    <td>
                        {{employee.id}}
                    </td>
                    <td>
                        {{employee.name}}
                    </td>
                    <td>
                        <img :src="'http://localhost:8080/'+employee.path" style="height: 80px;">
                    </td>
                    <td>
                        {{employee.salary}}
                    </td>
                    <td>
                        {{employee.age}}
                    </td>
                    <td>
                        <a href="javascript:;" @click="delemployee(employee.id)">删除员工信息</a>&nbsp;
                        <a :href="'updateEmp.html?id='+employee.id">更新员工信息</a>
                    </td>
                </tr>
            </table>
            <p>
                <input type="button" class="button" value="添加员工" onclick="location='addEmp.html'"/>
            </p>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            1453771560@qq.com
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            user: {},
            employees: {}
        },
        methods: {
            exit() {
                localStorage.removeItem("user");
                alert("确定退出吗?");
                location.href = "login.html";
                // location.reload(true); 刷新页面
            },
            delemployee(id) {
                if (window.confirm("确定删除此条员工信息吗?")) {
                    axios.get("http://localhost:8080/employee/delete?id=" + id).then(request => {
                        if (request.data.status) {
                            alert(request.data.msg + "点击确定刷新页面");
                            location.reload();
                        } else {
                            alert(request.data.msg);
                        }
                    })
                }
            }
        },
        mounted() {
            var userLocal = JSON.parse(localStorage.getItem("user"));
            if (userLocal) {
                this.user = userLocal;
            } else {
                alert("您还没有登录，点击确认跳转至登录界面");
                location.href = "login.html";
            }
            axios.get("http://localhost:8080/employee/findAll").then(request => {
                this.employees = request.data;
            })
        }
    })
</script>
